<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>count:{{100}}</p>
        <p>bool:{{bool}}</p>
        <p>nullstr:{{nullstr}}</p>
        <p>un:{{un}}</p>
        <p>arr:{{arr}}</p>
        <p>user:{{user.name}}--{{user.age}}</p>
        <p>{{user.age>22?"可以结婚啦":"赶紧挣钱去吧"}}</p>
        <p>{{count*100+100}}</p>
        <p>{{nullstr && 'ok'}}</p>
        <p>{{user.name ||count }}</p>
        <p>{{user.name ?? count }}</p>
        <p>{{!bool?"为false":'为true'}}</p>
        <p>{{str.substr(6)}}</p>
        <!-- <p>{{str.substr(6)}}</p> -->
    </div>

</body>

</html>
<script>

    // 知识点: 插值表达式 又叫  胡子语法
    // 语法: {{数据}}   => 数据就是data中定义的数据(响应式数据)
    // 响应式数据: 当数据发生变化的时候, 页面dom 会自动更新
    // 插值表达式中的语法: 
    // 01: number
    // 02:string
    // 03: boolean
    // 04: undeifned
    // 05: null 
    // 06: 三元运算符
    // 07: 加减乘除运算
    // 08: &&  ||  ??(空值运算符: 该运算符左侧如果为null 或undefined 则表达式结果为右侧内容,否则为左侧内容)
    // 09: !
    // 10: 使用js中的方法  substr()

    // 总结: 插值表达式主要用于在vue中的标签之间显示数据使用的,非常灵活
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                count: 100,
                bool: true,
                nullstr: null,
                un: undefined,
                arr: [1, 2, 3],
                user: {
                    name: '王杰',
                    age: 35
                },
                str: '2308班级万岁'
            }
        }
    }).mount('#app')


</script>